<!DOCTYPE html>
<html lang="en">
<head>
  <title>three.js webgl - animation - keyframes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link type="text/css" rel="stylesheet" href="./main.css">
  <style>
    body {
      background-color: #bfe3dd;
      color: #000;
    }

    a {
      color: #2983ff;
    }
  </style>
</head>

<body>

<div id="container"></div>

<script type="module">

  import * as THREE from './build/three.module.js';

  import { OrbitControls } from './jsm/controls/OrbitControls.js';
  import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';

  import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
  import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

  let mixer;

  const clock = new THREE.Clock();
  const container = document.getElementById( 'container' );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.outputEncoding = THREE.sRGBEncoding;
  container.appendChild( renderer.domElement );

  const pmremGenerator = new THREE.PMREMGenerator( renderer );

  const scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xbfe3dd );
  scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

  const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
  camera.position.set( 5, 2, 8 );

  const controls = new OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 0.5, 0 );
  controls.update();
  controls.enablePan = false;
  controls.enableDamping = true;

  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );

  const loader = new GLTFLoader();
  loader.setDRACOLoader( dracoLoader );
  loader.load( './pony_cartoon/scene.gltf', function ( gltf ) {

    const model = gltf.scene;
    model.position.set( 1, 1, 0 );
    model.scale.set( 1, 1, 1 );
    scene.add( model );

    mixer = new THREE.AnimationMixer( model );

    animate();

  }, undefined, function ( e ) {

    console.error( e );

  } );


  window.onresize = function () {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

  };


  function animate() {

    requestAnimationFrame( animate );

    const delta = clock.getDelta();

    mixer.update( delta );

    controls.update();

    renderer.render( scene, camera );

  }


</script>

</body>

</html>
